<template>
    <div class="login-box ht-pt-100 wd-pt-100 fx-ct-ct bg-f5">
        <div class="login-wrap pd-64 bd-rd-8 bg-f255">
            <div class="cr-bk-9 ft-24 fw-600 mg-bt-48 tx-ct">登录MES</div>
            <el-form :model="form" ref="loginFormRef" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="form.username" :prefix-icon="User" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" :prefix-icon="Lock" />
                </el-form-item>
            </el-form>
            <div
                class="login-btn fx-ct-ct cr-wt-10 bd-rd-4 ht-44 mg-tp-48 mg-bt-12 cs-pt"
                @click="onSubmit(loginFormRef)"
            >
                登录
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue';
import { useUserStoreHook } from '@/stores/user';
import type { FormInstance, FormRules } from 'element-plus';
import type { RuleForm } from '@/types/form';
import router from '@/router';
const { storeUserLogin } = useUserStoreHook();
const form = reactive<RuleForm>({
    username: 'adminUser',
    password: '123456'
});
const loginFormRef = ref<FormInstance>();
const rules = reactive<FormRules<RuleForm>>({
    username: [{ required: true, message: '请输入账户', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            // console.log('submit!');
            await storeUserLogin(form.username, form.password);
            router.push('/');
        } else {
            console.log('error submit!', fields);
        }
    });
};
</script>

<style lang="scss" scoped>
.el-input {
    width: 388px;
    height: 44px;
}

:deep(.el-input) {
    .el-icon {
        font-size: 20px;
    }
}

.login-btn {
    background: linear-gradient(-20.69deg, rgb(66 71 231 / 100%) 0%, rgb(100 104 223 / 100%) 100%);
}
</style>
